<!--
 * @Author: Liz.Zheng
 * @Date: 2021-11-30 15:16:05
 * @LastEditTime: 2022-01-11 13:11:40
 * @LastEditors: Liz.Zheng
 * @Description: 添加水印
 * @Motto: Write the code. Change the world.
-->

<template>
  <div class="tab-extra">
    <a-badge
      :count="noticeCount"
      class="system-notice"
      :numberStyle="{ fontSize: '10px', padding: 0 }"
      :offset="[-5, 10]"
    >
      <a-button type="text" @click="onNoticeClick">
        <template #icon>
          <cu-icon type="org-menu-xiaoxi" />
        </template>
        消息
      </a-button>
    </a-badge>
    <a-divider type="vertical" style="background-color: #ccc" />
    <a-dropdown>
      <a-space :size="5" style="margin-left: 16px; cursor: pointer">
        <a-avatar :size="18" :src="avatar" />
        <span>{{ realname }}</span>
        <DownOutlined style="font-size: 10px; color: rgba(0, 0, 0, 0.4)" />
      </a-space>
      <template #overlay>
        <a-menu>
          <a-menu-item v-if="!isXiaoMeiSha">
            <a-button type="text" @click="openInvitation">
              <template #icon>
                <UsergroupAddOutlined />
              </template>
              邀请同事
            </a-button>
          </a-menu-item>
          <a-menu-item v-if="!isXiaoMeiSha">
            <a-button type="text" @click="onPersonalSetting">
              <template #icon>
                <UserOutlined />
              </template>
              个人设置
            </a-button>
          </a-menu-item>
          <a-menu-item v-if="config.can_reg_org">
            <a-button type="text" @click="openCompanyChange">
              <template #icon>
                <SwapOutlined />
              </template>
              切换企业
            </a-button>
          </a-menu-item>
          <a-menu-item
            v-if="config.can_reg_org && !$store.getters.basicConfig.oem_org_id"
          >
            <a-button type="text" @click="openHelp">
              <template #icon>
                <QuestionCircleOutlined />
              </template>
              帮助与客服
            </a-button>
          </a-menu-item>
          <a-menu-item>
            <a-button type="text" @click="logout">
              <template #icon>
                <LoginOutlined />
              </template>
              退出登录
            </a-button>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";
import {
  DownOutlined,
  UsergroupAddOutlined,
  UserOutlined,
  SwapOutlined,
  QuestionCircleOutlined,
  LoginOutlined,
} from "@ant-design/icons-vue";

import store from "@/store";

export default defineComponent({
  name: "RightUserSetting",
  props: {},
  components: {
    DownOutlined,
    UsergroupAddOutlined,
    UserOutlined,
    SwapOutlined,
    QuestionCircleOutlined,
    LoginOutlined,
  },
  setup(props, { emit }) {
    const config = computed(() => store.getters.basicConfig);
    const noticeCount = computed(() => store.getters.noticeCount);
    const avatar = computed(() => store.getters.userInfo.avatar);
    const realname = computed(() => store.getters.userInfo.realname);
    const isXiaoMeiSha = computed(
      () => store.getters.customCompany === "xiaomeisha"
    );
    const onNoticeClick = () => {
      emit("onNoticeClick");
    };

    const openInvitation = () => {
      emit("openInvitation");
    };

    const onPersonalSetting = () => {
      emit("onPersonalSetting");
    };

    const openCompanyChange = () => {
      emit("openCompanyChange");
    };

    const openHelp = () => {
      emit("openHelp");
    };

    const logout = () => {
      emit("logout");
    };

    return {
      config,
      onNoticeClick,
      openInvitation,
      onPersonalSetting,
      openCompanyChange,
      openHelp,
      logout,
      noticeCount,
      avatar,
      realname,
      isXiaoMeiSha,
    };
  },
});
</script>

<style lang="less" scoped></style>
